<template>
    <div>

        <el-dialog
                title="新增下级代码"
                :visible.sync="dialogVisible"
                width="30%"
        ><el-form :label-position="labelPosition" :model="xjdm" ref="xjdm" :rules="rules" label-width="100px"  :inline="true"  class="demo-form-inline">
            <el-form-item label="上级代码名称:" class="sbj">
                <el-input v-model="sjdmmc"  placeholder="请输入上级代码名称" disabled></el-input>
            </el-form-item>
            <el-form-item label="上级代码值:" class="sbj">
                <el-input v-model="sjdmz"  placeholder="请输入上级代码值" disabled></el-input>
            </el-form-item>
            <el-form-item label="代码名称:"  prop="dmmc" class="sbj">
                <el-input v-model="xjdm.dmmc"  placeholder="请输入代码名称"></el-input>
            </el-form-item>
            <el-form-item label="代码值:"  prop="dmz" class="sbj">
                <el-input v-model="xjdm.dmz"  placeholder="请输入代码值"></el-input>
            </el-form-item>
            <el-form-item label="排序号:"  prop="pxh" class="sbj">
                <el-input v-model="xjdm.pxh"  placeholder="请输入排序号"></el-input>
            </el-form-item>
        </el-form>
            <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="save">确 定</el-button>
          </span>
        </el-dialog>
    </div>
</template>

<script>
    import {jcggDmxAdd} from '@/api/app/xtgl0301/dmbgl.js'                 //引入新增接口

    export default {
        data(){
            return{
                labelPosition: 'right',
                dialogVisible:false,                                //定义弹框隐藏
                xjdm:{
                    dmmc:null,
                    dmz:null,
                    pxh:null,
                },
                dmflbs:null,
                sjdmid:null,
                sjdmmc:null,
                sjdmz:null,
                rules:{
                    dmmc:[
                        { required: true, //是否必填
                            message: '代码名称不能为空', //规则
                            trigger: 'blur'  //何事件触发
                        }
                    ],
                    dmz:[
                        { required: true, //是否必填
                            message: '代码值不能为空', //规则
                            trigger: 'blur'  //何事件触发
                        }
                    ],
                    pxh:[
                        { required: true, //是否必填
                            message: '排序号不能为空', //规则
                            trigger: 'blur'  //何事件触发
                        }
                    ]
                }
            }
        },
        methods:{
            async save(){
                let parms ={
                    dmflbs:this.dmflbs,
                    dmmc:this.xjdm.dmmc,
                    dmz:this.xjdm.dmz,
                    pxh:this.xjdm.pxh,
                    sjdmid:this.sjdmid,
                }
                let data = await jcggDmxAdd(parms)
                this.$emit('jcggDmxFindListByPage')                //为父类自定义标签引用，刷新列表数据
                this.hidden()                                     //隐藏方法
            },
            show(){
                for(let key in this.xjdm){                      //清除弹框内容变
                    this.xjdm[key]=""
                }//显示方法
                this.dialogVisible = true
                this.$nextTick(() => {                         //清除弹框验证
                    this.$refs['xjdm'].clearValidate()
                })
            },
            hidden(){                                             //隐藏方法
                this.dialogVisible = false
            },
        },
    }
</script>

<style scoped>
    @import "../../../../styles/app0301.scss";
    .sbj {
        margin-top: 15px;
    }

    .el-input,.el-select {
        width:100%!important;
    }
</style>